<template>
    <div :class="maskClass">
        <template v-if="!isWhite">
            <div class="mask-loading">
                <div></div>
                <div></div>
            </div>
            <div class="mask-info">加载中...</div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'TechMask',
    props: {
        isWhite: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        maskClass() {
            return `tech-mask ${this.visiable ? 'show' : 'hide'}`;
        },
    },
    data() {
        return {
            visiable: false,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        hide() {
            this.visiable = false;
        },
    },
};
</script>

<style lang="less">
.tech-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 1);
    .flex-column-center();
    &.hide {
        display: none;
    }
    &.show {
        display: flex;
    }
    .mask-info {
        .font-size-md();
        .m-t(@gap-md);
        color: @gray-dark;
    }
    /*变化的方块*/
    .mask-loading,
    .mask-loading>div {
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .mask-loading {
        display: block;
        font-size: 0;
        color: #fff
    }

    .mask-loading>div {
        display: inline-block;
        float: none;
        background-color: rgba(0,0,0,.7);
        border: 0 solid rgba(0,0,0,.7)
    }

    .mask-loading {
        width: 50px;
        height: 50px
    }

    .mask-loading>div:nth-child(1),
    .mask-loading>div:nth-child(2) {
        position: absolute;
        left: 0;
        width: 100%
    }

    .mask-loading>div:nth-child(1) {
        top: -25%;
        z-index: 1;
        height: 100%;
        border-radius: 10%;
        animation: square-jelly-box-animate 0.6s -0.1s linear infinite
    }

    .mask-loading>div:nth-child(2) {
        bottom: -9%;
        height: 10%;
        background: #000;
        border-radius: 50%;
        opacity: .2;
        animation: square-jelly-box-shadow 0.6s -0.1s linear infinite
    }

    @keyframes square-jelly-box-animate {
        17% {
            border-bottom-right-radius: 10%
        }
        25% {
            -webkit-transform: translateY(25%) rotate(22.5deg);
            -moz-transform: translateY(25%) rotate(22.5deg);
            -o-transform: translateY(25%) rotate(22.5deg);
            transform: translateY(25%) rotate(22.5deg)
        }
        50% {
            border-bottom-right-radius: 100%;
            -webkit-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
            -moz-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
            -o-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
            transform: translateY(50%) scale(1, 0.9) rotate(45deg)
        }
        75% {
            -webkit-transform: translateY(25%) rotate(67.5deg);
            -moz-transform: translateY(25%) rotate(67.5deg);
            -o-transform: translateY(25%) rotate(67.5deg);
            transform: translateY(25%) rotate(67.5deg)
        }
        100% {
            -webkit-transform: translateY(0) rotate(90deg);
            -moz-transform: translateY(0) rotate(90deg);
            -o-transform: translateY(0) rotate(90deg);
            transform: translateY(0) rotate(90deg)
        }
    }

    @keyframes square-jelly-box-shadow {
        50% {
            -webkit-transform: scale(1.25, 1);
            -moz-transform: scale(1.25, 1);
            -o-transform: scale(1.25, 1);
            transform: scale(1.25, 1)
        }
    }
}
</style>
